<template>
  <q-page class="q-pa-md">
    <div class="q-pb-md text-h5">富文本编辑器demo</div>
    <div class="text-h6">QEditor</div>
    <div>QEditor的例子，官方文档: <a href="https://quasar.dev/vue-components/editor#qeditor-api">link</a>，
      默认能够贴图，图片已base64方式编码直接存入文本当中（这样做显然有很多弊端），这个控件提供的选项太少，难将其调整到我们的要求
    </div>
    <div class="shadow-2 q-mt-sm">
      <q-editor class="col-12"
        v-model="$d.qEditorData" />
    </div>
    <div class="q-mt-md">数据内容</div>
    <div class="shadow-2">
      <pre style="overflow-wrap: break-word;white-space: pre-wrap; min-height: 100px;"
        class="q-pa-sm">{{$d.qEditorData}}</pre>
    </div>

    <div class="text-h6 q-mt-lg">CKEditor5</div>
    <div>CKEditor 5，官方文档 <a href="https://ckeditor.com/docs/ckeditor5/latest/installation/index.html">
      <q-btn size="sm" color="primary" outline>Link</q-btn>
    </a>
      在线构建页面 <a href="https://ckeditor.com/ckeditor-5/online-builder/">
        <q-btn size="sm" color="primary" outline>Link</q-btn>
      </a> 自定义图片上传功能说明
      <a href="https://ckeditor.com/docs/ckeditor5/latest/framework/deep-dive/upload-adapter.html">
        <q-btn size="sm" color="primary" outline>Link</q-btn>
      </a>
      老牌富文本编辑器，定制功能强，我们有几个需求：
    </div>
    <ul>
      <li>要禁用直接贴图，避免图片直接以base64编入文本中，这样会导致文本过大，不利于读取和搜索</li>
      <li>保存的文本的时候，要能够检测文本中的总的图片列表，在后端把已经删除掉的图片资源文件也删掉，否则垃圾文件会越来越多</li>
      <li>要充分考虑图片和普通附件的区别，不要删除无效图片的时候同时把有用的附件也删除了</li>
      <li>工具栏要能定制，仅仅显示我们所需的按钮，屏蔽掉无用的，或有安全隐患的功能</li>
    </ul>
    <div class="shadow-2 q-mt-sm">
      <ckeditor :editor="customerEditor" v-model="$d.ckEditorData" :config="editorConfig" @ready="onCkEditorReady"></ckeditor>
    </div>
    <div class="q-mt-md">数据内容 <q-btn color="primary" :disable="savingState" :loading="savingState"
      @click="saveCkEditorContent">保存</q-btn></div>
    <div class="shadow-2">
      <pre style="overflow-wrap: break-word;white-space: pre-wrap; min-height: 100px;"
        class="q-pa-sm">{{$d.ckEditorData}}</pre>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'QEditorDemo',
}
</script>
<script lang="ts" setup>

import {reactive, ref} from 'vue'
// CKEditor5的vue组件
import CKEditor from '@ckeditor/ckeditor5-vue'

//QEditor
const $d = reactive({
  qEditorData: '',
  ckEditorData: '',
})

//CKEditor
// 这个相当于在本页中注册了ckeditor组件标签
const ckeditor = CKEditor.component

//自定义编辑器，要将这个作为ckeditor组件中的editor的参数
//@ts-ignore
import Editor from 'ckeditor5-custom-build/build/ckeditor'
import { FileLoader } from '@ckeditor/ckeditor5-upload'
import PostImgUploadAdapter from './PostImgUploadAdaptor'

const customerEditor = Editor
//CKEditor的配置
const editorConfig = {}
const onCkEditorReady = function(editor:any){
  editor.plugins.get('FileRepository').createUploadAdapter = (loader:FileLoader) => {
    return new PostImgUploadAdapter(loader);
  };
}

const savingState = ref(false)
const saveCkEditorContent = function () {
  savingState.value = true
  $f.axios.post('/misc-test/save-post/1', {
    title:'标题',
    content:$d.ckEditorData
  })
  .catch((err) => {
    $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
  })
  .finally(() => {
    savingState.value = false
  })
}

</script>

<style lang="sass">
//注意：这里定义的CSS是不带scoped的，带scoped就不起作用了，如果需要添加别的css，需要注意这点
//指定CKEditor最小高度
.ck-content
  min-height: 200px
//隐藏掉powered by CKEditor5标识
.ck-powered-by-balloon
  display: none !important
</style>
